//生产管理系统/数据趋势分析
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, DatePicker, Button,Select  } from 'antd';
import style from './DataTrend.less';
import moment from 'moment';
import TrendEcharts from './sub/TrendEcharts';
import {TrendQuery} from '../../services/redmoe';

//日期选择器套件
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;


//下拉选择器 及联动
const Option = Select.Option;
const provinceData = ['温度', '压力','其他'];
const cityData = {
  温度: ['回转窑进口温度', '旋风除尘器出口温度','喷淋塔进口温度','回转窑内部温度','烟囱温度','脉冲除尘器进口温度','急冷塔出口温度','急冷塔进口温度','热交换空气进口温度','热交换空气出口温度','二燃室内部温度','循环水箱温度'],
  压力: ['二燃室压力', '急冷塔出口压力', '急冷塔水泵出口压力','循环水泵管道出口压力','压缩空气压力','引风机进口压力','回转窑出口压力','脉冲除尘器压差'],
  其他:['进料螺旋频率','进料螺旋电流','回转窑频率','回转窑电流','250KW引风机频率','250KW引风机电流','大棚引风机频率','大棚引风机电流','急冷泵频率','急冷泵电流','循环水泵频率','循环水泵电流','罗茨风机频率','罗茨风机电流']
};

class DataTrend extends Component {
    state = {
        cities: cityData[provinceData[0]],
        secondCity: cityData[provinceData[0]][0],
        secondCity2: cityData[provinceData[0]][1],
        startDate:null,
        RangePicker: null,
        startValue: null,
        endValue: null,
        endOpen: false,
        TrendTu:null,
        timeList1:[],
        handValue:"温度",
        handValue1:"温度",
    }
 
    //页面进入事件
    componentDidMount() {
       
        let data = {
            indexOne:this.state.secondCity,
            indexTwo:this.state.secondCity2,
            startTime:moment().subtract(3, "days").format("YYYY-MM-DD 00:00:00"),
            endTime:moment().format("YYYY-MM-DD 00:00:00"),
        }
        TrendQuery({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                data.data.ret.timeList.forEach(item => {
                    item = moment(item).format("YYYY-MM-DD HH:mm:ss")
                    console.log(item)
                    this.state.timeList1.push(item)
                });
                setTimeout(() => {
                    this.setState({
                        TrendTu:data.data.ret
                    })
                });
               
            }
        })


    }


    //选择器下拉及联动
    handleProvinceChange1 = (value) => {
        console.log(value)
        this.setState({
            handValue:value,
          cities: cityData[value],
          secondCity: cityData[value][0],
        });
      }
    
      onSecondCityChange1 = (value) => {
        this.setState({
          secondCity: value,
        });
      }

      handleProvinceChange2 = (value) => {
        this.setState({
            handValue1:value,
          cities: cityData[value],
          secondCity2: cityData[value][0],
          
        });
      }
    
      onSecondCityChange2 = (value) => {
        this.setState({
          secondCity2: value,
        });
      }
      //日期选择器
      disabledStartDate = (startValue) => {
        const endValue = this.state.endValue;
        if (!startValue || !endValue) {
          return false;
        }
        return startValue.valueOf() > endValue.valueOf();
      }
    
      disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
          return false;
        }
       
        let one = startValue.valueOf() +1000*60*60*72;
      
        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() >= one ;
      }
      
    
      onChange = (field, value) => {
        this.setState({
          [field]: value,
        });
      }
    
      onStartChange = (value) => {
        this.onChange('startValue', value);
      }
    
      onEndChange = (value) => {
        this.onChange('endValue', value);
      }
    
      handleStartOpenChange = (open) => {
        if (!open) {
          this.setState({ endOpen: true });
        }
      }
    
      handleEndOpenChange = (open) => {
        this.setState({ endOpen: open });
      }

      //查询事件
      save = () => {
     this.setState({
        timeList1:[]
     })
     setTimeout(() => {
        let data = {
            indexOne:this.state.secondCity,
            indexTwo:this.state.secondCity2,
            startTime:this.state.startValue == null?"":moment(this.state.startValue).format("YYYY-MM-DD HH:mm:ss"),
            endTime:this.state.endValue == null?"":moment(this.state.endValue).format("YYYY-MM-DD HH:mm:ss"),
        }
        TrendQuery({...data}).then(data => {

            console.log(data)
            if(data.data.rc == 0) {
                data.data.ret.timeList.forEach(item => {
                    item = moment(item).format("YYYY-MM-DD HH:mm:ss")
                    console.log(item)
                    this.state.timeList1.push(item)
                });
                setTimeout(() => {
                    this.setState({
                        TrendTu:data.data.ret
                    })
                });
               
            }
        })
     })
       



      }

      //重置事件
      reset = () => {
          this.setState({
            startValue: null,
            endValue: null,
            cities: cityData[provinceData[0]],
            secondCity: cityData[provinceData[0]][0],
            secondCity2: cityData[provinceData[0]][1],
            handValue:"温度",
            handValue1:"温度"
           
          })

        let data = {
            indexOne:this.state.secondCity,
            indexTwo:this.state.secondCity2,
            startTime:moment().subtract(3, "days").format("YYYY-MM-DD 00:00:00"),
            endTime:moment().format("YYYY-MM-DD 00:00:00"),
        }
        TrendQuery({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                this.setState({
                    TrendTu:data.data.ret,
                    startValue:null,
                    endValue:null
                })
            }
        })

      }
    
    
    render() {
        const { startValue, endValue, endOpen } = this.state;
        const { cities } = this.state;
      
        return (
            
            <div>
                <Card
                    className={style.CardTop}
                    bodyStyle={{padding:0}}
                    headStyle={{padding:0}}
                >
                 <div>
                    
                     <div style={{marginTop:10,paddingLeft: 10}}><span style={{fontWeight:700}}>指标1</span>   数据类型:
                        <Select
                            defaultValue={provinceData[0]}
                            style={{ width: 70,marginRight:10,marginLeft:5 }}
                            onChange={this.handleProvinceChange1}
                            size="small"
                           value={this.state.handValue}
                            >
                            {provinceData.map(province => <Option key={province}>{province}</Option>)}
                        </Select>
                        测点名称:
                        <Select
                            style={{ width: 170,marginLeft:5,marginRight:5 }}
                            value={this.state.secondCity}
                            onChange={this.onSecondCityChange1}
                            size="small"
                            >
                            {cities.map(city => <Option key={city}>{city}</Option>)}
                        </Select>
                    </div>


                    <div style={{marginTop:10,paddingLeft: 10}}><span style={{fontWeight:700}}>指标2</span>   数据类型:
                        <Select
                            defaultValue={provinceData[0]}
                            style={{ width: 70,marginRight:10,marginLeft:5  }}
                            onChange={this.handleProvinceChange2}
                            size="small"
                            value={this.state.handValue1}
                            >
                            {provinceData.map(province => <Option key={province}>{province}</Option>)}
                        </Select>
                        测点名称:
                        <Select
                            style={{ width: 170 ,marginLeft:5,marginRight:5}}
                            value={this.state.secondCity2}
                            onChange={this.onSecondCityChange2}
                            size="small"
                            >
                            {cities.map(city => <Option key={city}>{city}</Option>)}
                        </Select>
                    </div>
                    
                 </div>

                        <div className={style.box_button}>
                        开始时间:<DatePicker
                        disabledDate={this.disabledStartDate}
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        size="small"
                        value={startValue}
                        placeholder="开始时间"
                        onChange={this.onStartChange}
                        onOpenChange={this.handleStartOpenChange}
                        style={{width:"25vh",marginRight:10,marginLeft:5}}
                        />

                        结束时间:<DatePicker
                        disabledDate={this.disabledEndDate}
                        showTime
                        size="small"
                        format="YYYY-MM-DD HH:mm:ss"
                        value={endValue}
                        placeholder="结束时间"
                        onChange={this.onEndChange}
                        open={endOpen}
                        onOpenChange={this.handleEndOpenChange}
                        style={{width:"25vh",marginRight:10,marginLeft:5}}
                        />
                        <Button type="primary" className={style.primary} onClick={this.save}>查询</Button>
                        <Button className={style.reset} onClick={this.reset}>重置</Button>
                        </div>
                  


                </Card>

                <Card
                    headStyle={{height:40}}
                    className={style.CardBottom}
                >

                <TrendEcharts
                TrendTu={this.state.TrendTu}
                timeList1={this.state.timeList1}
                />

                </Card>




            </div>
        )
    }
}

export default connect()(DataTrend)